<!DOCTYPE html>
<html lang="en">
<head>
<<<<<<< HEAD
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最简单的分页</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
  
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
 
ul.pagination li {display: inline;}
 
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid gray;
	border-radius:3px;
}
.active{
	background-color: yellow;
}
</style>
</head>
<body>
	<form>
	<h2>最简单的分页</h2>
	<ul class="pagination"></ul>
	<input type="hidden" id="currentPage" name="currentPage" value="1"></input>
	<input type="hidden" id="totalPage" value="100"></input>
	</form>
<script>
$().ready(function(){
	
	var curPage =$("#currentPage").val();
	var last =$("#totalPage").val();
	var page =Math.ceil(curPage/10);
	//调用绘制分页样式函数
	draw(page,curPage);
	
	//绑定点击页码事件
	$(document).on("click",".pagination li a",function(){
		var str =$(this).html();
		if(!isNaN(str)){
			//移除之前的active
			$(".pagination li a").removeClass("active");
			$(this).attr("class","active");
			$("#currentPage").val(str);
		}
	});
	
	//绑定下一页点击事件
	$(document).on("click","#nextPage",function(){
		var num =$(".active").html();
		var curPage =$("#currentPage").val();
		var last =$("#totalPage").val();
		var page =Math.ceil((parseInt(num))/10);
		if(num < page*10 && num != last){
			//移除之前的active
			$(".pagination li a").removeClass("active");
			$("#"+(parseInt(num)+1)+"").attr("class","active");
			//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
			$("#currentPage").val(parseInt(num)+1);
			var class_name = $(".pagination").attr("class");
			$(".pagination li".eq(0).addClass("current"));
		}else if(num == page*10 && num != last){
			//清空之前的数据
			$(".pagination").html("");
			draw(page+1,(parseInt(num)+1));
		}
	})
	
	//绑定上一页点击事件
	$(document).on("click","#previousPage",function(){
		var num =$(".active").html();
		var curPage =$("#currentPage").val();
		var last =$("#totalPage").val();
		var page =Math.ceil((parseInt(num))/10);
		if(num <= page*10 && num != (page-1)*10+1){
			//移除之前的active
			$(".pagination li a").removeClass("active");
			$("#"+(parseInt(num)-1)+"").attr("class","active");
			//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
			$("#currentPage").val(parseInt(num)-1);
		}else if(num == (page-1)*10+1 && num != 1){
			//清空之前的数据
			$(".pagination").html("");
			draw(page-1,(parseInt(num)-1));
		
		}
	})
	
	//绘制页面分页样式
	function draw(page,curPage){
		//页面中的当前页
		var page =page;
		//后台传过来的页数
		var curPage = curPage;
		//后台传过来的总页数
		var datas =$("#totalPage").val();
		//每页显示多少条数据
		var pageSize =10;
		//在网页中一共要分多少页
		var totalPage = Math.floor((datas-1)/pageSize+1);
		
		var liStr ="<li><a id='previousPage' href='#'>«</a></li>";
		$("#currentPage").val(curPage);
		if(page <= totalPage){
			if(datas <= 10){
				for(i=1; i<=datas; i++){
					//为当前页增加样式
					var active ="";
					if(i==curPage){
						active=" class='active' ";
					}
					liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
				}
			}else{
				var start =pageSize*(page-1)+1;
				var end =page*pageSize;
				if(page == totalPage){
					for(i=start; i<=datas; i++){
						//为当前页增加样式
						var active ="";
						if(i==curPage){
							active=" class='active' ";
						}
						liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
					}
				}else{
					for(i=start; i<=end; i++){
						//为当前页增加样式
						var active ="";
						if(i==curPage){
							active=" class='active' ";
						}
						liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"
					}
				}
			}
		}
		liStr +="<li><a id='nextPage' href='#'>»</a></li>";
		$(".pagination").append(liStr);
	}
})
</script>
=======
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height: 0px;"></div>
<div class="menu">
	<div class="center">
		<ul class="ul-list">
			<li ><a href="#">站酷</a></li>
			<li><a href="#">首页</a></li>
			<li>
				<a href="#">发现</a>
				<ol class="ol-list">
					<li><a href="">平面</a></li>
					<li><a href="">ui</a></li>
					<li><a href="">三维</a></li>
					<li><a href="">工业/产品</a></li>
				</ol>
			</li>
			<li>
				<a href="#">职位</a>
				<ol class="ol-list">
					<li><a href="">职位</a></li>
					<li><a href="">公司</a></li>
					<li><a href="">发布职位</a></li>
			
				</ol>
			</li>
			<li>
				<a href="#">活动</a>
				<ol class="ol-list">
					<li><a href="">设计大赛</a></li>
					<li><a href="">专题策划</a></li>
					<li><a href="">线上活动</a></li>
					<li><a href="">线下活动</a></li>
					<li><a href="">学习音频</a></li>
				</ol>
			</li>
			<li>
				<a href="#">正版素材</a>
				<ol class="ol-list">
					<li><a href="">图片</a></li>
					<li><a href="">字体</a></li>
					<li><a href="">视频</a></li>
					<li><a href="">音乐</a></li>
				</ol>
			</li>
			<li>
				<a href="#">课程</a>
				<ol class="ol-list">
					<li><a href="">会员专享</a></li>
					<li><a href="">免费直播</a></li>
					<li><a href="">正在热销</a></li>
					<li><a href="">口碑好课</a></li>
				</ol>
			</li>
			<li>
				<a href="#">版权保护</a>
				<ol class="ol-list">
					<li><a href="">著作权登记</a></li>
					<li><a href="">区块链存证</a></li>
					<li><a href="">维权服务</a></li>
					<li><a href="">商标注册</a></li>
				</ol>
			</li>
		</ul>
	</div>
</div>




<div style="height: 1000px;"></div>
<div style="text-align:center;">

</div>
>>>>>>> 462edce8e913f044a06b902d3c3f82a3eed37be6
</body>
</html>
